<template>
	<div>
 
			<!--面包屑导航区域-->
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
			  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
			</el-breadcrumb>
			
			<!--卡片视图区-->
			<el-card> 
			
			    <!--搜索与添加区域-->
				<el-row :gutter="20"><!--间隙为20px-->
					<el-col :span="7">
						<el-input @clear="getUserList" clearable placeholder="请输入内容" v-model="queryInfo.query">
						  <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
						</el-input>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" @click="addDialogVisible=true">
							添加用户
						</el-button>
					</el-col>
				</el-row>
				
				<!--用户列表区域-->
				<el-table border stripe :data="userList">
					<!--添加索引列-->
					<el-table-column type="index"></el-table-column>
					<!--label标题 prop为数据-->
					<el-table-column label="姓名" prop="username"></el-table-column>
					<el-table-column label="邮箱" prop="email"></el-table-column>
					<el-table-column label="电话" prop="mobile"></el-table-column>
					<el-table-column label="角色" prop="role_name"></el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
						<!-- 	{{scope.row}} 每个用户的详细信息-->
							<el-switch
						       v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
							</el-switch>

						</template>
					</el-table-column>
					<el-table-column label="操作" width="180px">
						<template slot-scope="scope">
							<!--修改按钮-->
							<el-button @click="showEditDialog(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
							<!--删除按钮-->
							<el-button @click="removeUserById(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
							<!--分配角色按钮-->
							<el-tooltip :enterable="false" effect="dark" content="分配角色" placement="top">
						        <el-button @click="setRole(scope.row)" size="mini" type="warning" icon="el-icon-setting"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>					
				</el-table>
				
				
				   <!--分页区-->
				    <el-pagination
				      @size-change="handleSizeChange" 
				      @current-change="handleCurrentChange"
				      :current-page="queryInfo.pagenum"
				      :page-sizes="[1, 2, 3, 4]"
				      :page-size="queryInfo.pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total">
					  <!--
					    @size-change  每页多少条
						@current-change 页码值发生变化时触发
						current-page 当前展示的第几页的数据
						:page-size 当前情况下每页显示多少条数据
						layout需要展示哪些功能组件
					  -->
				    </el-pagination>
				
			</el-card>
			
			<!--添加用户的对话框-->
			<el-dialog
			  title="提示"
			  :visible.sync="addDialogVisible"
			  width="50%"
			  @close="addDialogClosed">
			  
			  <!--
			    :visible.sync  对话框的显示与隐藏
				
			  -->
			  
			  <!--
			    内容主体区域
			  -->
			  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
			    <el-form-item label="用户名" prop="username">
			      <el-input v-model="addForm.username"></el-input>
			    </el-form-item>
			    <el-form-item label="密码" prop="password">
			      <el-input v-model="addForm.password"></el-input>
			    </el-form-item>
			    <el-form-item label="邮箱" prop="email">
			      <el-input v-model="addForm.email"></el-input>
			    </el-form-item>
			    <el-form-item label="手机" prop="mobile">
			      <el-input v-model="addForm.mobile"></el-input>
			    </el-form-item>
			  </el-form>	
			  
			  <!--底部区域-->
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addUser">确 定</el-button>
			  </span>
			</el-dialog>
		
		
		    <!--修改用户的对话框-->
		     <el-dialog
		       title="修改用户信息"
		       :visible.sync="editDialogVisible"
		       width="50%"
			   @close="editDialogClosed">
			   
			   
			   <!--绑定查询得到的editForm-->
			   <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
			     <el-form-item label="用户名">
			       <el-input v-model="editForm.username" disabled></el-input>
			     </el-form-item>
			     <el-form-item label="邮箱" prop="email">
			       <el-input v-model="editForm.email"></el-input>
			     </el-form-item>
			     <el-form-item label="手机" prop="mobile">
			       <el-input v-model="editForm.mobile"></el-input>
			     </el-form-item>
			   </el-form> 
			   
		       <span slot="footer" class="dialog-footer">
		         <el-button @click="editDialogVisible = false">取 消</el-button>
		         <el-button type="primary" @click="editUserInfo">确 定</el-button>
		       </span>
		     </el-dialog>
			 
			 <!--分配角色的对话框-->
			 <el-dialog
			   title="分配角色"
			   :visible.sync="setRoledialogVisible"
			   width="50%"
			   @close="setRoleDialogClosed">
			   
			   <div>
			   	<p>当前的用户：{{userInfo.username}}</p>
			   	<p>当前的角色：{{userInfo.role_name}}</p>
				<p>
					分配新角色：
					 <el-select v-model="selectedRoleId" placeholder="请选择">
					    <el-option
					      v-for="item in rolesList"
					      :key="item.id"
					      :label="item.roleName"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</p>
			   </div>			
			   
			   <span slot="footer" class="dialog-footer">
			     <el-button @click="setRoledialogVisible = false">取 消</el-button>
			     <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
			   </span>
			 </el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			//自定义规则
			//验证邮箱的规则
			let checkEmail=(rule,value,cb)=>{
				const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
				if(regEmail.test(value)){
					//合法的邮箱
					return cb();
				}
				//new Error错误对象
				cb(new Error("请输入合法的邮箱"));
			}
			
			//验证手机号的规则
			let checkMobile=(rule,value,cb)=>{
				const  regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ 
				if(regMobile.test(value)){
					return cb();
				}
				
				cb(new Error("请输入合法的手机号"));
			}
			 
			return {
				//获取用户列表的参数对象
				queryInfo:{
					query:"",
					//当前页码
					pagenum:1,
					//当前每页显示多少条数据
					pagesize:2
				},
				//所有的用户列表
				userList:[],
				//总数据条数
				total:0,
				//控制添加对话框的显示与隐藏
				addDialogVisible:false,
				//控制修改用户对话框的显示与隐藏
				editDialogVisible:false,
				//添加用户额表单数据
				addForm:{
					username:"",
					password:"",
					email:"",
					mobile:""
				},
				//添加表单的验证规则对象
				addFormRules:{
					username:[
						{required:true,message:"请输入用户名",trigger:"blur"},
						{min:3,max:10,message:"用户名的长度在3-10个字符之间",trigger:"blur"}
					],
					password:[
						{required:true,message:"请输入密码",trigger:"blur"},
						{min:6,max:15,message:"密码的长度在6-15个字符之间",trigger:"blur"}
					],
					email:[
							{required:true,message:"请输入邮箱",trigger:"blur"},
							{validator:checkEmail,trigger:"blur"}
					],
					mobile:[
							{required:true,message:"请输入手机号码",trigger:"blur"},
							{validator:checkMobile,trigger:"blur"}
					]
				},
				//查询到的用户信息对象
				editForm:{},
				//修改表单的验证规则对象
				editFormRules:{
				  /*	
					validator [ˈvælɪdeɪtə] 验证控件;验证器;校验器;验证;验证程序
				  */	
					email:[
						{
						   required:true,
						   message:"请输入用户邮箱",
						   trigger:"blur"
						},
						{
							validator:checkEmail,
							trigger:"blur"
						}
					],
					mobile:[
						{
						   required:true,
						   message:"请输入用户手机",
						   trigger:"blur"
						},
						{
							validator:checkMobile,
							trigger:"blur"
						}
					]
				},
				//控制分配角色对话框的显示与隐藏
				setRoledialogVisible:false,
				//需要被分配角色的用户信息
				userInfo:{},
				//所有角色的数据列表
				rolesList:[],
				//已选中的角色id值
				selectedRoleId:""
			}
		},
		created(){
			this.getUserList();
		},
		methods:{
			async getUserList(){
				const {data:res}=await this.$http.get("users",{params:this.queryInfo});
				if(res.meta.status!==200) return this.$message.error("获取用户列表失败！");
				console.log("获取用户列表：",res);
				this.userList=res.data.users;
				this.total=res.data.total;
			},
			//监听pagesize改变的事件
			handleSizeChange(newSize){
				//console.log(newSize);
				this.queryInfo.pagesize=newSize;
				this.getUserList();
			},
			
			//监听页码值改变的事件
			handleCurrentChange(newPage){
				console.log(newPage);
				this.queryInfo.pagenum=newPage;
				this.getUserList();
			},
			
			//监听 switch开关状态的改变
			async userStateChanged(userInfo){
				console.log(userInfo);
				const {data:res}=await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`);
			   
			    if(res.meta.status!==200){
					userInfo.mg_state=!userInfo.mg_state;
					return this.$message.error("更新用户状态失败！");
				}
				
				this.$message.success("更新用户状态成功！");
			},
			//监听添加用户对话框的关闭事件  关闭重置表单
			addDialogClosed(){
				this.$refs.addFormRef.resetFields();
			},
			//点击按钮，添加新用户的预验证功能
			addUser(){
				this.$refs.addFormRef.validate(async valid=>{
					console.log("预验证结果：",valid);
					if(!valid) return;
					//下面可以发起添加用户的网络请求
					const {data:res}=await this.$http.post("users",this.addForm);
					if(res.meta.status!==201){
						this.$message.error("添加用户失败！");
					}					
					this.$message.success("添加用户成功！");
					//隐藏添加用户的对话框
					this.addDialogVisible=false;
					//重新获取用户列表数据
					this.getUserList();
				})
			},
			
			//展示编辑用户的对话框
			async showEditDialog(id){
				this.editDialogVisible=true;
				const {data:res}=await this.$http.get("users/"+id);
			 
				if(res.meta.status!==200){
					return this.$message.error("查询用户信息失败！");
				} 
				//根据id查询用户信息
				console.log("根据id查询用户得到的信息",res);
				console.log("得到的id:",id);
				
				this.editForm=res.data;
			},
			//监听修改用户对话框的关闭事件
			editDialogClosed(){
				this.$refs.editFormRef.resetFields();
			},
			//修改用户信息并提交 预验证
			editUserInfo(){
				this.$refs.editFormRef.validate(async valid=>{
					console.log("修改用户信息预验证结果：",valid);
					if(!valid) return;
					//发起修改用户信息的数据请求
					const {data:res}=await this.$http.put(`users/${this.editForm.id}`,{
						email:this.editForm.email,
						mobile:this.editForm.mobile
					});
					 
					// if(res.meta.status!==200){
					// 	return this.$message.error("更新用户信息失败！");
					// }
					
					//关闭对话框
					this.editDialogVisible=false;
					//刷新数据列表
					this.getUserList();
					//提示修改成功
					this.$message.success("更新用户信息成功！");
				});
			},
			//根据id删除对应的用户信息
			async removeUserById(id){
				console.log(id);
				//弹框询问用户是否删除数据
				const res=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).catch(err=>err);
						
				//如果用户确认了删除，则res返回值为字符串"confirm"		
				//如果用户取消了删除，则res返回值为字符串"cancel"		
				//console.log(res);	
				if(res!=="confirm"){
					return this.$message.info("已取消删除");
				}
					
				console.log("确认了删除！");	
				
				const res01 = await this.$http.delete("users/"+id);
				//console.log("res01:",res01);
				if(res01.status!==200){
					return this.$message.error("删除用户失败！");
				}
				
				this.$message.success("删除用户成功！");
				this.getUserList();
				
			},
			//展示分配角色的对话框
			async setRole(userInfo){
				this.userInfo=userInfo;
				
				//在展示对话框之前，获取所有角色的列表
				const res01=await this.$http.get("roles");
				console.log("res01:",res01);
				if(res01.status!==200){
					return this.$message.error("获取角色列表失败！");
				}
				
				this.rolesList=res01.data.data;
				this.setRoledialogVisible=true;
			},
			//点击按钮，分配角色
			async saveRoleInfo(){
				if(!this.selectedRoleId){
					return this.$message.error("请选择要分配的角色！");
				}
				
				const roleRes=await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId});
			    console.log("roleRes:",roleRes);
			    if(roleRes.status!==200){
					return this.$message.error("更新角色失败！");
				}
				
				this.$message.success("更新角色成功！");
				this.getUserList();
				this.setRoledialogVisible=false;
			},
			//监听分配角色对话框的关闭事件，清空分配的新角色信息。
			setRoleDialogClosed(){
				this.selectedRoleId="";
				this.userInfo={};
			}
		}
	}
</script>

<style>
</style>
